<template>
  <!-- 头部 -->
  <van-nav-bar title="IT精品图书" :fixed="true"/>
  <!-- 轮播图 -->
  <van-swipe class="mySwipe mt46" :autoplay="3000" height="200">
    <van-swipe-item v-for="item in slidesData" :key="item.id">
      <img :src="item.img_url" obj-fit="cover" />
    </van-swipe-item>
  </van-swipe>
  <!-- 导航区 -->
  <div class="navBox">
    <div class="nav">
      <a
        v-for="item in tabList[0].data"
        :key="item.id"
        @click.stop="goToDetail(item.id)"
        >
        <img :src="item.cover_url" />
        <span>{{ item.title }}</span>
      </a>
    </div>
  </div>
  <!-- 列表 -->
  <van-tabs v-model:active="active" sticky offset-top="45">
    <van-tab v-for="tabItem in tabList" :key="tabItem.key" :title="tabItem.title">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :offset="10"
        :immediate-check="false"
        >
        <van-grid :column-num="2">
          <van-grid-item
            v-for="contentItem in tabItem.data"
            :key="contentItem.id"
            class="item"
            @click.stop="goToDetail(contentItem.id)"
            >
            <van-image :src="contentItem.cover_url" />
            <div class="info">
              <p>{{ contentItem.title }}</p>
              <p>
                <span>&yen;&nbsp;{{ contentItem.price }}</span>
                <span><van-icon name="star-o" />{{contentItem.collects_count}}</span>
              </p>
            </div>
          </van-grid-item>
        </van-grid>
      </van-list>
    </van-tab>
  </van-tabs>
  <!-- 返回顶部按钮 -->
  <back-top></back-top>
</template>

<script lang="ts" setup>
import { slides, sales } from "@/api/home";
import { onMounted, reactive, ref } from "vue";
import { InitSlides, ItabList } from '@/types/home'
// import router from "@/router";

import { detail } from "@/api/goods";
import { useRouter } from "vue-router";
  let router = useRouter()
  // 加载动画
  // let isLoading = ref<boolean>(true)
  let slidesData = ref<InitSlides>(); // 轮播图数据
  let active = ref<number>(0); // tabs选中项
  let tabList: Array<ItabList> = reactive([
    { key: 0, title: "畅销", page: 1, data: [] },
    { key: 1, title: "新书", page: 1, data: [] },
    { key: 2, title: "精选", page: 1, data: [] },
  ]);
  // 列表属性
  let loading = ref(false);
  let finished = ref(false);
  // 获取轮播图数据
  let getSlidesData = async () => {
    let res = await slides();
    slidesData.value = res.data.slides;
  };
  // 获取tabs列表数据
  class GetData {
    dataTypeIndex: number
    httpList: object
    constructor(dataTypeIndex: number) {
      this.dataTypeIndex = dataTypeIndex,
      this.httpList = {}
    }
    async sendRequtest() {
      switch (this.dataTypeIndex) {
        case 0:  // 热销商品
          this.httpList = { page: tabList[0].page, sales: 1 }
          break;
        case 1:  // 最新商品
          this.httpList = { page: tabList[1].page, new: 1 }
          break;
        case 2:  // 推荐商品
          this.httpList = { page: tabList[2].page, recommend: 1 }
          break;
      }
      let res = await sales(this.httpList);
      if (res.data.goods.to !== null) {
        tabList[this.dataTypeIndex].data.push(...res.data.goods.data)
        // 加载状态结束
        loading.value = false
      }
      if (res.data.goods.to === null) {
        // 数据加载完成
        finished.value = true
      }
    }
  }
  let getSalesData = new GetData(tabList[0].key)
  let getNewsData = new GetData(tabList[1].key)
  let getRecommendData = new GetData(tabList[2].key)

  // 列表加载
  const onLoad = () => {
    switch (active.value) {
      case 0:
        tabList[0].page++
        getSalesData.sendRequtest()
        break;
      case 1:
        tabList[1].page++
        getNewsData.sendRequtest()
        break;
      case 2:
        tabList[2].page++
        getRecommendData.sendRequtest()
        break;
    }
  }
  // 跳转到详情页
  const goToDetail = (id:number) => {
    router.push({name: "detail",params:{id}})
  }
  onMounted(() => {
    getSlidesData();
    getSalesData.sendRequtest()
    getNewsData.sendRequtest()
    getRecommendData.sendRequtest()
  });
</script>

<style lang="less" scoped>
.mySwipe {
  img {
    height: 100%;
    width: 100%;
  }
}

.navBox {
  width: 100%;
  height: 165px;
  overflow-x: scroll;
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  border-bottom: 8px solid #eeeeee;

  .nav {
    position: absolute;
    display: flex;
    box-sizing: border-box;
    padding: 15px 0 20px;

    a {
      width: 25vw;
      text-align: center;

      img {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
      }

      span {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        padding: 0 5px;
      }
    }
  }
}

/deep/.van-tab__panel {
  margin-bottom: 50px;
  .item {
    text-align: center;
    .van-grid-item__content {
      justify-content: space-between !important;
    }
    .van-image {
      margin-bottom: 20px;
    }
    p {
      margin-bottom: 5px;
      font-size: 14px;
      &:last-of-type {
        font-size: 16px;
        span {
          &:first-of-type {
            color: red;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>